<template>
  <div class="bg">
    <!-- 头部 -->
    <Header :title="title"></Header>
    <!-- 搜索栏 -->
    <section class="search_bar">
      <LSelect label="区域位置" :value="a" :options="option" @selected-event="getNewSelected1"></LSelect>
      <LSelect2 label="监测因子类型" style="margin-left: 16px" :value="b" :options="option" @multiple-selected="getNewSelected2"></LSelect2>
    </section>
    <section class="search_bar">
      <LSelect label="报警类型" :value="c" :options="option" @selected-event="getNewSelected3"></LSelect>
      <LInput label="事件名称" v-model="d" style="margin-left: 16px"></LInput>
      <LSelect label="报警类型" style="margin-left: 16px" :value="e" :options="option" @selected-event="getNewSelected4"></LSelect>
      <LSelect label="报警依据" style="margin-left: 16px" :value="f" :options="option" @selected-event="getNewSelected5"></LSelect>
      <LSelect label="是否启用" style="margin-left: 16px" :value="g" :options="option" @selected-event="getNewSelected6"></LSelect>
      <LButton label="查询" style="margin-left: 16px"></LButton>
      <LButton label="新增" style="margin-left: 16px" @click="repairDialog = true"></LButton>
    </section>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" :default-sort="{prop:'b',order:descending}" border>
      <el-table-column label="监测因子原名" prop="a" />
      <el-table-column label="监测因子名称" prop="b" />
      <el-table-column label="报警分类类别" prop="c" />
      <el-table-column label="事件名称" />
      <el-table-column label="报警等级" />
      <el-table-column label="报警条件依据" />
      <el-table-column label="报警条件表达式" />
      <el-table-column label="重复间隔(h)" />
      <el-table-column label="是否启用" />
      <el-table-column label="生效时间" />
      <el-table-column label="过期时间" />
      <el-table-column label="操作" width="140">
        <!-- <template #default>
          <el-button type="primary" size="mini" @click="repairDialog2 = true">编辑</el-button>
          <el-button type="danger" size="mini" @click="del">删除</el-button>
        </template> -->
      </el-table-column>
    </el-table>

    <!-- 弹出框：新增 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="新增" width="40%" @close="repairDialogClose">
        <!-- <el-form label-width="80px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules" size="small">
          <div class="row-1">
            <el-form-item label="角色编码" prop="a" style="width:100%">
              <el-input v-model="repairForm.a"></el-input>
            </el-form-item>
            <el-form-item label="角色名称" prop="b" style="width:100%">
              <el-input v-model="repairForm.b"></el-input>
            </el-form-item>
          </div>
          <div style="padding: 0 2vw 0 0">
            <el-form-item label="排序" prop="b" style="width:100%">
              <el-input v-model="repairForm.b"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="k" style="width:100%">
              <el-input v-model="repairForm.k" type="textarea" :rows="1"></el-input>
            </el-form-item>
          </div>
        </el-form> -->
        无
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 弹出框：编辑 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog2" title="编辑" width="40%" @close="repairDialog2Close">
        <el-form label-width="80px" :model="repairForm2" ref="repairForm2Ref" :rules="repairForm2Rules" size="small">
          <div class="row-1">
            <el-form-item label="角色编码" prop="a" style="width:100%">
              <el-input v-model="repairForm2.a"></el-input>
            </el-form-item>
            <el-form-item label="角色名称" prop="b" style="width:100%">
              <el-input v-model="repairForm2.b"></el-input>
            </el-form-item>
          </div>
          <div style="padding: 0 2vw 0 0">
            <el-form-item label="排序" prop="b" style="width:100%">
              <el-input v-model="repairForm2.b"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="k" style="width:100%">
              <el-input v-model="repairForm2.k" type="textarea" :rows="1"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repair2SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog2 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Header from "@/components/Header";
import CsvExportor from "csv-exportor"; //导出csv
import htmlToPdf from "@/utils/htmlToPdf"; //导出pdf
import moment from "moment";
import LInput from "@/components/LInput.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LButton from "@/components/LButton.vue";
import LSelect from "@/components/LSelect.vue";
import LSelect2 from "@/components/LSelect2.vue";

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LButton,
    LSelect,
    LSelect2,
  },
  data() {
    return {
      title: "告警管理—告警设置",
      a: "",
      b: "",
      c: "",
      d: [],
      option: [
        { label: "选项1", value: 1 },
        { label: "选项2", value: 2 },
      ],
      tableData: [
        {
          a: "吴留方",
          b: "100014",
          c: "工程部",
          d: "维修主管",
          e: "",
          f: "15020717718",
          g: "",
          h: "",
          i: "100",
        },
      ],
      //=============================================
      repairDialog: false,
      repairForm: {},
      repairDialog2: false,
      repairForm2: {},
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    getNewSelected1(s) {
      this.a = s;
    },
    getNewSelected2(s) {
      this.b = s;
    },
    getNewSelected3(s) {
      this.c = s;
    },

    getNewSelected4(s) {
      this.e = s;
    },
    getNewSelected5(s) {
      this.f = s;
    },
    getNewSelected6(s) {
      this.g = s;
    },
    //情况form表单
    repairDialogClose() {
      // this.$refs.repairFormRef.resetFields(); //新增
    },
    repairDialog2Close() {
      // this.$refs.repairForm2Ref.resetFields(); //编辑
    },
    //删除数据按钮
    del() {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // post("/airChannel/deleteAirChannel", { id: id }).then((res) => {
          //   // console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message.success(res.data.data);
          //     this.getData();
          //   } else {
          //     this.$message.error(res.data.data);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>


<style lang="less" scoped>
@import "../OperaManage/opera.less";
.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row-1 {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 0;
}
</style>